<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../js/echarts.js"></script>
        <script src="../js/myTheme.js"></script>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            width: 100%;
            height: 800px;
            display: flex;
        }
        #myecharts {
            width: 700px;
            height: 500px;
            margin: auto;
            border: 1px solid #ccc;
        }
    </style>
    <body>
        <div id="box">
            <div id="myecharts"></div>
        </div>
    </body>
    <script type="text/javascript">
        const myecharts = document.getElementById('myecharts')
        // 基于准备好的dom，初始化echarts实例
        //init参数 (dom节点对象,'主题','')
        var myChart = echarts.init(myecharts, 'roma')

        // 指定图表的配置项和数据
        var option = {
            title: {
                show: true,
                text: 'ECharts 入门示例',
                link: 'https://www.baidu.com',
            },
            //控制提示框
            tooltip: {
                // formatter: '{a0},{b0},{c0}', //a0当前图例 b0是xAxis c0是series
                formatter: function (params) {
                    //函数 返回html
                    console.log(params)
                    return `<div>我的${params.seriesName}是：${
                        params.data + 444
                    }</div>`
                },
                textStyle: {
                    color: 'red',
                },
            },
            //图例设置
            legend: {
                data: [
                    {
                        name: '库存',
                        icon: 'roundRect',
                        itemStyle: {
                            color: '#673ab7',
                        },
                    },
                    {
                        name: '销量',
                        icon: 'roundRect',
                        itemStyle: {
                            color: 'green',
                        },
                    },
                    {
                        name: '机试100-80',
                        icon: 'roundRect',
                        itemStyle: {
                            color: '#673ab7',
                        },
                    },
                    {
                        name: '机试60-80',
                        icon: 'roundRect',
                        itemStyle: {
                            color: 'red',
                        },
                    },
                ],
                // icon: 'circle',
                // top: 200,
                // left: 30,
            },
            axisLine: {
                onZero: false,
            },
            //X轴 多个X轴
            xAxis: [
                {
                    // show: false,
                    // position: 'top',
                    data: [
                        '衬衫111',
                        '羊毛衫',
                        '雪纺衫',
                        '裤子',
                        '高跟鞋',
                        '袜子',
                        '羽绒服',
                    ],
                },
                {
                    // show: false,
                    position: 'bottom',
                    data: [
                        '衬衫',
                        '羊毛衫',
                        '雪纺衫',
                        '裤子',
                        '高跟鞋',
                        '袜子',
                        '羽绒服',
                    ],
                    offset: 30,
                },
            ],
            yAxis: {
                name: '数量',
                nameLocation: 'middle',
                max: 100,
                // min: function () {
                //     return
                // },
            },

            series: [
                {
                    legendHoverLink: false,
                    name: '销量',
                    type: 'bar',
                    data: [
                        {
                            value: 85,
                            label: {
                                show: true,
                                color: 'pink',
                                position: [-80, -80],
                            },
                            labelLine: {
                                show: true,
                                lineStyle: {
                                    color: 'yellow',
                                },
                            },
                            itemStyle: {
                                color: 'green',
                            },
                        },
                        {
                            value: 77,
                            label: {
                                show: true,
                                color: 'pink',
                                position: 'top',
                            },
                            labelLine: {
                                show: true,
                                lineStyle: {
                                    color: 'yellow',
                                },
                            },
                            itemStyle: {
                                color: 'green',
                            },
                        },
                        {
                            value: 99,
                            label: {
                                show: true,
                                color: 'pink',
                                position: 'top',
                            },
                            labelLine: {
                                length: 0, // 第一段引导线的长度
                                length2: 50, // 第二段引导线的长度
                                show: true,
                                lineStyle: {
                                    color: 'yellow',
                                },
                            },
                            itemStyle: {
                                color: 'green',
                            },
                        },
                        {
                            value: 85,
                            label: {
                                show: true,
                                color: 'pink',
                                position: 'top',
                            },
                            labelLine: {
                                show: true,
                                lineStyle: {
                                    color: 'yellow',
                                },
                            },
                            itemStyle: {
                                color: 'green',
                            },
                        },
                        {
                            value: 85,
                            label: {
                                show: true,
                                color: 'pink',
                                position: 'top',
                            },
                            labelLine: {
                                show: true,
                                lineStyle: {
                                    color: 'yellow',
                                },
                            },
                            itemStyle: {
                                color: 'green',
                            },
                        },
                        {
                            value: 85,
                            label: {
                                show: true,
                                color: 'pink',
                                position: 'top',
                            },
                            labelLine: {
                                show: true,
                                lineStyle: {
                                    color: 'yellow',
                                },
                            },
                            itemStyle: {
                                color: 'green',
                            },
                        },
                        {
                            value: 85,
                            label: {
                                show: true,
                                color: 'pink',
                                position: 'top',
                            },
                            labelLine: {
                                show: true,
                                lineStyle: {
                                    color: 'yellow',
                                },
                            },
                            itemStyle: {
                                color: 'green',
                            },
                        },
                        {
                            value: 85,
                            label: {
                                show: true,
                                color: 'pink',
                                position: 'top',
                            },
                            labelLine: {
                                show: true,
                                lineStyle: {
                                    color: 'yellow',
                                },
                            },
                            itemStyle: {
                                color: 'green',
                            },
                        },
                    ],
                    // colorBy: 'data',
                },
                {
                    name: '库存',
                    type: 'bar',
                    data: [66, 66, 66, 66, 66, 66, 55],
                    // colorBy: 'data',
                },
                {
                    name: '机试100-80',
                    data: [],
                    type: 'bar',
                },
                {
                    name: '机试60-80',
                    data: [],
                    type: 'bar',
                },
            ],
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)

        //之前在群里发过 每个人的自己考试成绩  把自己的考试成绩实现一个柱状图，
    </script>
</html>
